<template>
  <a-upload
    v-model:file-list="fileList"
    name="file"
    :custom-request="saveToAliyun"
    list-type="picture"
    @remove="remove"
    @change="handleChange"
  >
    <a-button>
      <upload-outlined></upload-outlined>
      点击上传(大小不能超过2M)
    </a-button>
    <!--    <template #itemRender="{ file, actions }">-->
    <!--      <a-space>-->
    <!--        <span :style="file.status === 'error' ? 'color: red' : ''">{{ file.name }}</span>-->
    <!--        <span v-if="file.response && file.response.imgKey">{{ file.response.imgKey }}</span>-->
    <!--      </a-space>-->
    <!--    </template>-->
  </a-upload>
</template>
<script>
import { message } from 'ant-design-vue'
import { UploadOutlined } from '@ant-design/icons-vue'
import { defineComponent, ref, toRefs } from 'vue'
import factory from '@/views/manage/portlet-manage/factory'
export default defineComponent({
  components: {
    UploadOutlined,
  },
  props: {
    images: { type: Array, default: () => [] },
  },
  emits: ['imgParams'],
  setup(props, ctx) {
    let { images } = toRefs(props)
    const fileList = ref(images.value)
    fileList.value.forEach((m) => {
      m.response = { ...m }
    })
    //====aliyun 拿到上传图片前的签名========
    const saveToAliyun = (e) => {
      let inFile = e.file
      if (inFile.size > 2097152) {
        message.error('上传的文件不能超过2M')
        fileList.value.splice(fileList.value.length - 1, 1)
        return
      }
      let tim = Date.parse(new Date())
      factory.getALiYunInfo().then((obj) => {
        obj.key = obj.dir + 'portlet-sub-' + tim + inFile.name
        let fd = new FormData()
        fd.append('name', 'portlet-sub-' + tim + inFile.name)
        fd.append('key', obj.key)
        fd.append('policy', obj.policy)
        fd.append('OSSAccessKeyId', obj.accessId)
        fd.append('success_action_status', '200')
        fd.append('signature', obj.signature)
        // fd.append("callback", obj.callback)
        fd.append('file', inFile)
        factory
          .uploadImg(obj.host, fd)
          .then((res) => {
            e.onSuccess({ name: 'portlet-sub-' + inFile.name, imgKey: obj.key, dataType: inFile.type }, e.file)
            console.log('组件中图片上传OSS成功:', fileList.value)
            ctx.emit('imgParams', fileList.value)
          })
          .catch((err) => {
            e.onError()
          })
      })
    }
    const remove = (file) => {
      console.log('移出1:', file)
      let arr = fileList.value.filter((m) => m.response.imgKey !== file.response.imgKey)
      ctx.emit('imgParams', arr)
    }

    const handleChange = (info) => {
      console.log('文件上传状态', info.file)
      if (info.file.status === 'done') {
        getBase64(info.file.originFileObj, (base64Url) => {
          info.file.response.url = base64Url
        })
      }
    }
    function getBase64(img, callback) {
      const reader = new FileReader()
      reader.addEventListener('load', () => callback(reader.result))
      reader.readAsDataURL(img)
    }
    return {
      fileList,
      saveToAliyun,
      remove,
      handleChange,
    }
  },
})
</script>
